<template>
  <div class="h-full bg-white rounded-content-wrap p-5">
    <el-tabs v-model="activeName" class="h-full">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        lazy
      >
        <component :is="item.name" @onRefresh="initPortal()"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import BaseInfo from '@/components/admin/manage/portal/BaseInfo/index.vue'
import { ActionsType as TreeActionsType } from '@/actions/tree'
import { ActionsType as PortalActionsType } from '@/actions/portal'

export default Vue.extend({
  components: {
    BaseInfo,
    ParkInfo: () => import('@/components/admin/manage/portal/ParkInfo/index.vue'),
    IndustryInfo: () => import('@/components/admin/manage/portal/IndustryInfo/index.vue'),
    IndustrySupport: () => import('@/components/admin/manage/portal/IndustrySupport/index.vue'),
    ProductionCost: () => import('@/components/admin/manage/portal/productionCost/index.vue'),
    RecommendProject: () => import('@/components/admin/manage/portal/RecommendProject/index.vue'),
    PreferredResources: () =>
      import('@/components/admin/manage/portal/PreferredResources/index.vue'),
  },
  data() {
    return {
      tabList: [
        {
          label: '基本信息',
          name: 'BaseInfo',
        },
        {
          label: '园区概况',
          name: 'ParkInfo',
        },
        {
          label: '产业情况',
          name: 'IndustryInfo',
        },
        {
          label: '产业配套',
          name: 'IndustrySupport',
        },
        {
          label: '生产成本',
          name: 'ProductionCost',
        },
        {
          label: '招商项目',
          name: 'RecommendProject',
        },
        {
          label: '优选资源',
          name: 'PreferredResources',
        },
      ],
      activeName: 'BaseInfo',
    }
  },
  head: {
    title: '主页管理',
  },
  computed: {
    ...mapGetters('user', ['orgId']),
  },
  created() {
    this.initPortal()
    this.$store.dispatch(TreeActionsType.getArea)
    this.$store.dispatch(TreeActionsType.getIndustryTag)
  },
  methods: {
    initPortal() {
      if (this.orgId) {
        this.$store.dispatch(PortalActionsType.getPortalByCustomId)
      }
    },
  },
})
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__item {
  @apply text-main-content;
}

::v-deep .el-tabs__item.is-active {
  @apply text-main-title;
  @apply font-semibold;
}

::v-deep .el-tabs__header {
  @apply m-0;
}

::v-deep .el-tabs__content,
.el-tab-pane {
  height: calc(100% - 10px) !important;
}
</style>
